<template>
    <div>
        <div class="header">
            <headerCom name="headerCom" />
        </div>

        <!-- 分类 -->
        <ul>
            <li class="titles" v-for="item, index in state" :key="index" @click="kindClick(index)">
                <div class="more">
                    <i :class="item.icon" class="iconfnts"></i>
                    {{ item.titles }}
                </div>
            </li>
        </ul>
        <div class="conten">
            <van-tabs v-model:active="active" sticky @change="changeClick(active + 1)">
                <van-tab v-for="item in titles" :key="item.id" :title="item.name">

                </van-tab>
            </van-tabs>
            <van-grid :column-num="2">
                <van-grid-item v-for="item in recommendations" :key="item.id">
                    <van-image class="van-img" :src="item.image_url" />
                    <span>{{ item.title }}</span>
                    <div class="bottom">
                        <div class="left">
                            <van-image
                                src="https://cdn7.axureshop.com/demo2024/1212098/images/%E9%A6%96%E9%A1%B5/u262.png"></van-image>
                            <span>西瓜</span>
                        </div>
                        <div class="right">
                            <van-image :src="item.liked ? 'https://cdn7.axureshop.com/demo2024/1212098/images/%E9%A6%96%E9%A1%B5/u261.png' : 'https://cdn7.axureshop.com/demo2024/1212098/images/%E9%A6%96%E9%A1%B5/u258.png' " @click="item.id !== undefined ? imgClick(item.id) : null" class="icons"></van-image>
                            <span>{{ item.likes }}</span>
                        </div>
                    </div>

                </van-grid-item>

            </van-grid>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, type Ref } from 'vue';
import headerCom from '@/components/header/headerCom.vue';
import { categoriesFn, fetchRecommendationsByCategory,recommendationsLikesFn } from '@/API/home';
import { useRouter } from 'vue-router';
const active = ref()

interface Recommendation {
    id?: number;
    title?: string;
    image_url?: string;
    likes?: number;
    name?: string;
    liked: boolean;
}


const router = useRouter()
const value = ref('')


const state = [
    { titles: '选城市', icon: 'iconfont icon-weizhi1' },
    { titles: '看游记', icon: 'iconfont icon-hanglixiang' },
    { titles: '必读榜', icon: 'iconfont icon-pol' },
    { titles: '选酒店', icon: 'iconfont icon-jiudian' },
    { titles: '找攻略', icon: 'iconfont icon-gonglve' }
]

const icon = ref('https://cdn7.axureshop.com/demo2024/1212098/images/%E9%A6%96%E9%A1%B5/u258.png')
// https://cdn7.axureshop.com/demo2024/1212098/images/%E9%A6%96%E9%A1%B5/u261.png


const titles:Ref<Recommendation[]> = ref([])

onMounted(() => {
    categoriesFn().then(res => {
        console.log(res.data)
        titles.value = res.data


        // 加载第一条数据
        if (res.data.length > 0) {
            changeClick(res.data[0].id);
        }
    })

})

const categories = ref([]);
const recommendations:Ref<Recommendation[]> = ref([]);
function changeClick(categoryId: any) {
    console.log('iiiiiii88888s')
    console.log(categoryId, 'iiiiiiiiii')
    fetchRecommendationsByCategory(categoryId)
        .then(response => {
            console.log(response, 'iiiiiiiiiiiiiiiiiiiiiiii999999999999')
            recommendations.value = response.data; // 更新推荐数据
        })
        .catch(error => {
            console.error('获取推荐数据失败:', error);
        });
}


// 点赞
function imgClick(id: number) {
    // console.log(id,  likesnew,'hhhhhhhhhhhhhhhhhhhhh')
   
    const item = recommendations.value.find(item => item.id === id);
    if (item) {
        item.liked = !item.liked; // 切换liked状态
        
    }
    recommendationsLikesFn(id).then(res=>{
        console.log(res,'hhhhhhhiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiihhhhhhhhh')
        categoriesFn().then(res => {
        console.log(res.data)
        titles.value = res.data


        // 加载第一条数据
        if (res.data.length > 0) {
            changeClick(res.data[0].id);
        }
    })
    })
}


// 分类点击
function kindClick(index: number) {
    console.log(index)
    switch (index) {
        case 0: router.push('/selectCity')
            break;
        case 1: router.push('/watchravelogues')
            break;
        case 2: router.push('/MustReadListView')
            break;
        case 3: router.push('/ChooseahotelView')
            break;
        case 4: router.push('/FindaguideView')
            break;
        default: return

    }
}








</script>


<style lang="scss" scoped>
.titles {
    float: left;
    width: 20%;
    margin-top: 0.4rem;

    .more {
        display: flex;
        flex-direction: column;
        height: 0.5rem;
        align-items: center;
        padding-top: 0.1rem;

        .iconfnts {
            font-size: 0.3rem;


            &:nth-child(1) {
                color: rgb(228, 197, 154);
            }
        }


    }

}

.conten {
    margin-top: 1rem;
    // overflow: auto;

    .van-img {
        height: 200px;

        margin-bottom: 10px;
    }

    .bottom {
        // background-color: red;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .left {
            flex: 1;
            display: flex;
            justify-content: left;
            align-items: center;

            span {
                margin-top: 0.04rem;
            }
        }

        .icons {
            cursor: pointer;
        }
    }

}
</style>